<template>
  <div class="relative min-h-full flex flex-col md:pb-0 pb-16">
    <slot></slot>
    
    <!-- 底部固定操作栏 -->
    <div 
      v-if="showFixedControls" 
      class="fixed bottom-0 left-0 right-0 bg-white dark:bg-secondary-800 border-t border-gray-200 dark:border-secondary-700 shadow-lg z-40 md:hidden"
      style="padding-bottom: env(safe-area-inset-bottom, 0);"
    >
      <div class="flex p-3 gap-3">
        <slot name="fixed-controls">
          <button 
            v-if="cancelText" 
            @click="handleCancel" 
            class="flex-1 py-3 px-4 rounded-md border border-gray-300 dark:border-secondary-600 bg-white dark:bg-secondary-700 text-secondary-700 dark:text-secondary-200 font-medium hover:bg-gray-50 dark:hover:bg-secondary-600 transition-colors"
          >
            {{ cancelText }}
          </button>
          <button 
            @click="handleSubmit" 
            class="flex-1 py-3 px-4 rounded-md bg-primary-600 text-white font-medium hover:bg-primary-700 transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
            :disabled="loading"
          >
            <span v-if="!loading">{{ submitText }}</span>
            <span v-else class="flex items-center justify-center">
              <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              处理中...
            </span>
          </button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  showFixedControls: {
    type: Boolean,
    default: true
  },
  submitText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  loading: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['submit', 'cancel']);

const handleSubmit = () => {
  emit('submit');
};

const handleCancel = () => {
  emit('cancel');
};
</script>

<style lang="scss" scoped>
@use '@/assets/styles/responsive.scss' as responsive;

.mobile-form-controls {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
  @include responsive.respond-to('sm') {
    padding-bottom: 64px; // 为底部操作栏留出空间
  }
}

.fixed-controls {
  display: none;
  
  @include responsive.respond-to('sm') {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 99;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  }
}

.control-btn {
  flex: 1;
  height: 44px;
  font-size: 16px;
  
  &.cancel-btn {
    margin-right: 10px;
  }
}
</style> 